<template>
  <div class="information-query-page">
    <!-- 顶部导航 -->
    <van-nav-bar
      title="信息查询"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
      class="custom-nav-bar"
    >
      <template #right>
        <van-icon name="delete-o" @click="clearHistory" />
      </template>
    </van-nav-bar>

    <!-- 功能介绍 -->
    <div class="feature-intro">
      <div class="intro-content">
        <div class="intro-icon">🔍</div>
        <div class="intro-text">
          <h3>信息查询助手{{ currentMode ? ` - ${currentMode}` : '' }}</h3>
          <p>帮助你查询天气、电话、资讯等各类实时信息</p>
        </div>
      </div>

      <!-- 查询类型标签 -->
      <div class="query-tabs">
        <div class="mode-title">选择查询类型：</div>
        <div class="tabs-container">
          <div
            v-for="mode in queryModes"
            :key="mode.name"
            :class="['mode-tab', { active: currentMode === mode.name }]"
            @click="selectMode(mode)"
          >
            <span class="tab-icon">{{ mode.icon }}</span>
            <span class="tab-name">{{ mode.name }}</span>
          </div>
        </div>
      </div>

      <!-- 示例查询 -->
      <div class="intro-examples" v-if="currentMode">
        <div class="example-title">💡 试试这些{{ currentMode }}查询：</div>
        <div class="example-tags">
          <span
            v-for="example in currentExamples"
            :key="example"
            class="example-tag"
            @click="askExample(example)"
          >
            {{ example }}
          </span>
        </div>
      </div>
    </div>

    <!-- 对话区域 -->
    <div class="chat-container" ref="chatContainer">
      <div v-if="messages.length === 0" class="empty-chat">
        <div class="empty-icon">🌤️</div>
        <p>请输入你想查询的信息</p>
      </div>

      <div
        v-for="(message, index) in messages"
        :key="index"
        :class="['message-item', message.type]"
      >
        <div class="message-avatar">
          {{ message.type === 'user' ? '👤' : '🔍' }}
        </div>
        <div class="message-content">
          <div class="message-text" v-html="formatMessage(message.content)"></div>
          <div class="message-time">{{ formatTime(message.timestamp) }}</div>
        </div>
      </div>

      <!-- 加载状态 -->
      <div v-if="isLoading" class="message-item ai loading">
        <div class="message-avatar">🔍</div>
        <div class="message-content">
          <div class="typing-indicator">
            <span></span>
            <span></span>
            <span></span>
          </div>
        </div>
      </div>
    </div>

    <!-- 输入区域 -->
    <div class="input-container">
      <div class="input-wrapper">
        <van-field
          v-model="inputText"
          placeholder="请输入你想查询的信息..."
          type="textarea"
          rows="1"
          autosize
          @keyup.enter="sendMessage"
          class="message-input"
        />
        <van-button
          type="primary"
          size="large"
          :loading="isLoading"
          @click="sendMessage"
          class="send-btn"
          :disabled="!inputText.trim()"
        >
          <van-icon name="search" />
        </van-button>
      </div>

      <!-- 智能功能 -->
      <div class="smart-features">
        <div class="feature-item" @click="showQuickQueries">
          <van-icon name="question-o" />
          <span>快速查询</span>
        </div>
        <div class="feature-item" @click="showQueryHistory">
          <van-icon name="clock-o" />
          <span>查询历史</span>
        </div>
        <div class="feature-item" @click="toggleDarkMode">
          <van-icon :name="isDarkMode ? 'sun-o' : 'moon-o'" />
          <span>{{ isDarkMode ? '浅色' : '深色' }}</span>
        </div>
        <div class="feature-item" @click="exportQueries">
          <van-icon name="down" />
          <span>导出记录</span>
        </div>
      </div>
    </div>

    <!-- 快速查询弹窗 -->
    <van-popup v-model:show="showQuickPopup" position="bottom" :style="{ height: '70%' }">
      <div class="quick-popup">
        <div class="popup-header">
          <h3>快速查询</h3>
          <van-button size="small" @click="showQuickPopup = false">关闭</van-button>
        </div>
        <div class="popup-content">
          <div class="category-tabs">
            <div
              v-for="category in quickCategories"
              :key="category.name"
              :class="['category-tab', { active: activeQuickCategory === category.name }]"
              @click="activeQuickCategory = category.name"
            >
              {{ category.icon }} {{ category.name }}
            </div>
          </div>
          <div class="quick-queries">
            <div
              v-for="query in currentQuickQueries"
              :key="query"
              class="quick-query"
              @click="selectQuickQuery(query)"
            >
              {{ query }}
            </div>
          </div>
        </div>
      </div>
    </van-popup>

    <!-- 查询历史弹窗 -->
    <van-popup v-model:show="showHistoryPopup" position="bottom" :style="{ height: '60%' }">
      <div class="history-popup">
        <div class="popup-header">
          <h3>查询历史</h3>
          <div class="header-actions">
            <van-button size="small" @click="clearQueryHistory">清空</van-button>
            <van-button size="small" @click="showHistoryPopup = false">关闭</van-button>
          </div>
        </div>
        <div class="popup-content">
          <div v-if="queryHistory.length === 0" class="empty-history">
            <div class="empty-icon">📝</div>
            <p>暂无查询历史</p>
          </div>
          <div v-else class="history-list">
            <div
              v-for="(item, index) in queryHistory"
              :key="index"
              class="history-item"
              @click="selectHistoryQuery(item)"
            >
              <div class="history-content">
                <div class="history-query">{{ item.query }}</div>
                <div class="history-time">{{ formatTime(item.timestamp) }}</div>
              </div>
              <van-icon name="arrow" />
            </div>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script setup lang="ts">
import { ref, nextTick, onMounted, computed } from 'vue'
import { showToast, showConfirmDialog } from 'vant'
import { useRoute } from 'vue-router'
import aiService from '@/services/aiService'
import { saveUserData, loadUserData, getCurrentUserId, migrateOldData } from '@/utils/userDataManager'

const route = useRoute()

// 响应式数据
const inputText = ref('')
const messages = ref<Array<{
  type: 'user' | 'ai'
  content: string
  timestamp: number
}>>([])
const isLoading = ref(false)
const chatContainer = ref<HTMLElement>()
const currentMode = ref<string>('')

// 查询模式配置
const queryModes = ref([
  {
    name: '天气查询',
    icon: '🌤️',
    description: '实时天气信息查询',
    examples: ['查询明天保定的天气', '北京今天天气怎么样', '这周末会下雨吗', '明天适合出门吗']
  },
  {
    name: '股票行情',
    icon: '📈',
    description: '股市行情实时查看',
    examples: ['查询苹果股价', '今日A股行情', '比特币价格', '黄金价格走势']
  },
  {
    name: '新闻资讯',
    icon: '📰',
    description: '最新新闻资讯获取',
    examples: ['今日头条新闻', '科技新闻', '财经资讯', '体育新闻']
  },
  {
    name: '交通信息',
    icon: '🚗',
    description: '交通路况实时查询',
    examples: ['北京到上海路况', '地铁线路查询', '航班信息', '高速路况']
  },
  {
    name: '汇率查询',
    icon: '💱',
    description: '实时汇率信息查询',
    examples: ['人民币汇率', '美元兑人民币', '欧元汇率', '日元汇率']
  }
])

// 当前示例查询
const currentExamples = computed(() => {
  if (!currentMode.value) return []
  const mode = queryModes.value.find(m => m.name === currentMode.value)
  return mode ? mode.examples : []
})

// 发送消息
const sendMessage = async () => {
  const query = inputText.value.trim()
  if (!query || isLoading.value) return

  // 添加到查询历史
  if (!queryHistory.value.some(item => item.query === query)) {
    queryHistory.value.unshift({ query, timestamp: Date.now() })
    if (queryHistory.value.length > 50) {
      queryHistory.value = queryHistory.value.slice(0, 50)
    }
    saveToLocal('history', queryHistory.value)
  }

  // 添加用户消息
  const userMsg = {
    type: 'user',
    content: query,
    timestamp: Date.now()
  }
  messages.value.push(userMsg)

  inputText.value = ''
  isLoading.value = true

  await scrollToBottom()

  // 添加AI消息占位符
  const aiMessageIndex = messages.value.length
  messages.value.push({
    type: 'ai',
    content: '',
    timestamp: Date.now()
  })

  let accumulatedText = ''

  try {
    console.log('🚀 开始流式信息查询:', query, currentMode.value)

    // 尝试流式输出
    await aiService.informationQueryStream(
      12345,
      query,
      currentMode.value,
      // onMessage回调
      (content: string) => {
        console.log('📝 收到流式内容:', content)
        accumulatedText += content
        messages.value[aiMessageIndex].content = accumulatedText
        scrollToBottom()
      },
      // onComplete回调
      () => {
        console.log('✅ 流式输出完成')
        isLoading.value = false
        scrollToBottom()
      },
      // onError回调
      async (error: any) => {
        console.error('❌ 流式输出失败，尝试非流式输出:', error)

        // 流式输出失败，尝试非流式输出
        try {
          const response = await aiService.informationQuery(12345, query, currentMode.value)
          console.log('📊 非流式API响应:', response)

          if (response && response.code === 200) {
            // 智能解析数据格式
            let content = ''
            if (response.data) {
              if (typeof response.data === 'string') {
                content = response.data
              } else if (response.data.response) {
                content = response.data.response
              } else if (response.data.content) {
                content = response.data.content
              } else {
                content = JSON.stringify(response.data, null, 2)
              }
            }

            messages.value[aiMessageIndex].content = content || '查询完成，但没有返回具体内容。'
          } else {
            messages.value[aiMessageIndex].content = `API调用失败: ${response?.message || '未知错误'}`
          }
        } catch (fallbackError) {
          console.error('❌ 非流式输出也失败:', fallbackError)
          messages.value[aiMessageIndex].content = `网络错误: ${fallbackError.message || fallbackError}`
        }

        isLoading.value = false
        scrollToBottom()
      }
    )

  } catch (error) {
    console.error('信息查询失败:', error)

    // 备选方案：直接调用非流式API
    try {
      const response = await aiService.informationQuery(12345, query, currentMode.value)
      if (response.code === 200) {
        messages.value[aiMessageIndex].content = response.data || '抱歉，我现在无法查询到相关信息。请稍后再试。'
      } else {
        messages.value[aiMessageIndex].content = '抱歉，我现在无法查询到相关信息。请稍后再试。'
      }
    } catch (fallbackError) {
      console.error('备选方案失败:', fallbackError)
      messages.value[aiMessageIndex].content = '抱歉，我现在无法查询到相关信息。请稍后再试。'
    }

    isLoading.value = false
    await scrollToBottom()
  }
}

// 已删除模拟数据生成函数，现在使用真实API

// 选择模式
const selectMode = (mode: any) => {
  currentMode.value = mode.name
  showToast(`已切换到${mode.name}模式`)
}

// 点击示例查询
const askExample = (example: string) => {
  inputText.value = example
  sendMessage()
}

// 格式化消息内容
const formatMessage = (content: string) => {
  return content
    .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
    .replace(/\*(.*?)\*/g, '<em>$1</em>')
    .replace(/\n/g, '<br>')
}



// 滚动到底部
const scrollToBottom = async () => {
  await nextTick()
  if (chatContainer.value) {
    chatContainer.value.scrollTop = chatContainer.value.scrollHeight
  }
}

// 清空历史
const clearHistory = async () => {
  try {
    await showConfirmDialog({
      title: '确认清空',
      message: '确定要清空所有查询记录吗？'
    })

    messages.value = []
    showToast('查询记录已清空')
  } catch {
    // 用户取消
  }
}

// 新增功能状态
const showQuickPopup = ref(false)
const showHistoryPopup = ref(false)
const activeQuickCategory = ref('天气')
const isDarkMode = ref(false)

// 本地存储功能
const queryHistory = ref<Array<{query: string, timestamp: number}>>([])

// 快速查询分类
const quickCategories = ref([
  {
    name: '天气',
    icon: '🌤️',
    queries: [
      '今天天气怎么样？',
      '明天会下雨吗？',
      '这周的天气预报',
      '现在的温度是多少？',
      '空气质量如何？'
    ]
  },
  {
    name: '股票',
    icon: '📈',
    queries: [
      '上证指数今日行情',
      '深证成指最新价格',
      '创业板指数走势',
      '美股道琼斯指数',
      '比特币最新价格'
    ]
  },
  {
    name: '新闻',
    icon: '📰',
    queries: [
      '今日头条新闻',
      '科技新闻资讯',
      '财经新闻动态',
      '体育新闻快报',
      '娱乐新闻热点'
    ]
  },
  {
    name: '汇率',
    icon: '💱',
    queries: [
      '美元兑人民币汇率',
      '欧元兑人民币汇率',
      '日元兑人民币汇率',
      '英镑兑人民币汇率',
      '港币兑人民币汇率'
    ]
  },
  {
    name: '交通',
    icon: '🚗',
    queries: [
      '北京到上海的航班',
      '高铁票价查询',
      '地铁线路查询',
      '实时路况信息',
      '油价最新调整'
    ]
  }
])

// 当前快速查询
const currentQuickQueries = computed(() => {
  const category = quickCategories.value.find(c => c.name === activeQuickCategory.value)
  return category ? category.queries : []
})

// 从本地存储加载数据
const loadLocalData = () => {
  try {
    const userId = getCurrentUserId()
    if (!userId) {
      console.warn('⚠️ 用户未登录，无法加载个人数据')
      return
    }

    // 迁移旧数据（如果存在）
    migrateOldData('informationQuery', [
      { oldKey: 'infoQuery_history', dataType: 'history' },
      { oldKey: 'infoQuery_darkMode', dataType: 'darkMode' }
    ])

    // 加载用户专属数据
    queryHistory.value = loadUserData('informationQuery', 'history', [])
    isDarkMode.value = loadUserData('informationQuery', 'darkMode', false)

    // 应用深色模式
    document.documentElement.classList.toggle('dark-mode', isDarkMode.value)

    console.log(`✅ 信息查询数据已加载 - 用户ID: ${userId}`)
  } catch (error) {
    console.error('❌ 加载本地数据失败:', error)
  }
}

// 保存到本地存储
const saveToLocal = (key: string, data: any) => {
  const success = saveUserData('informationQuery', key, data)
  if (!success) {
    console.warn('⚠️ 保存数据失败，用户可能未登录')
  }
}

// 显示快速查询
const showQuickQueries = () => {
  showQuickPopup.value = true
}

// 选择快速查询
const selectQuickQuery = (query: string) => {
  inputText.value = query
  showQuickPopup.value = false
  nextTick(() => {
    sendMessage()
  })
}

// 显示查询历史
const showQueryHistory = () => {
  showHistoryPopup.value = true
}

// 选择历史查询
const selectHistoryQuery = (item: any) => {
  inputText.value = item.query
  showHistoryPopup.value = false
  nextTick(() => {
    sendMessage()
  })
}

// 清空查询历史
const clearQueryHistory = () => {
  queryHistory.value = []
  saveToLocal('history', queryHistory.value)
  showToast('查询历史已清空')
}

// 切换深色模式
const toggleDarkMode = () => {
  isDarkMode.value = !isDarkMode.value
  document.documentElement.classList.toggle('dark-mode', isDarkMode.value)
  saveToLocal('darkMode', isDarkMode.value)
  showToast(isDarkMode.value ? '已切换到深色模式' : '已切换到浅色模式')
}

// 导出查询记录
const exportQueries = () => {
  if (messages.value.length === 0) {
    showToast('暂无查询记录可导出')
    return
  }

  const content = messages.value.map(msg => {
    const time = new Date(msg.timestamp).toLocaleString()
    const role = msg.type === 'user' ? '查询' : '结果'
    return `[${time}] ${role}: ${msg.content}`
  }).join('\n\n')

  const blob = new Blob([content], { type: 'text/plain;charset=utf-8' })
  const url = URL.createObjectURL(blob)
  const a = document.createElement('a')
  a.href = url
  a.download = `信息查询记录-${new Date().toLocaleDateString()}.txt`
  document.body.appendChild(a)
  a.click()
  document.body.removeChild(a)
  URL.revokeObjectURL(url)

  showToast('查询记录已导出到文件')
}

// 格式化时间
const formatTime = (timestamp: number) => {
  const now = Date.now()
  const diff = now - timestamp

  if (diff < 1000 * 60) {
    return '刚刚'
  } else if (diff < 1000 * 60 * 60) {
    return `${Math.floor(diff / (1000 * 60))}分钟前`
  } else if (diff < 1000 * 60 * 60 * 24) {
    return `${Math.floor(diff / (1000 * 60 * 60))}小时前`
  } else {
    return new Date(timestamp).toLocaleDateString()
  }
}

onMounted(() => {
  // 加载本地数据
  loadLocalData()

  // 检查路由参数中的模式
  const routeMode = route.query.mode as string
  if (routeMode) {
    const mode = queryModes.value.find(m => m.name === routeMode)
    if (mode) {
      currentMode.value = routeMode
    }
  } else {
    // 默认选择第一个模式
    currentMode.value = queryModes.value[0].name
  }

  // 添加欢迎消息
  const welcomeMessage = `你好！我是信息查询助手 🔍\n\n当前为 **${currentMode.value}模式**，我可以帮你查询各种实时信息。\n\n✨ **新功能提示**：\n• 点击"快速查询"查看常用查询\n• 使用"查询历史"回顾之前的查询\n• 切换"深色模式"保护眼睛\n• "导出记录"保存重要信息\n\n**支持查询类型**：天气、股票、新闻、汇率、交通等\n\n有什么想查询的吗？`

  messages.value.push({
    type: 'ai',
    content: welcomeMessage,
    timestamp: Date.now()
  })
})
</script>

<style scoped>
.information-query-page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.custom-nav-bar {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.feature-intro {
  margin: 16px;
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

/* 查询标签页样式 */
.query-tabs {
  margin-top: 16px;
}

.mode-title {
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 12px;
}

.tabs-container {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 4px;
  background: #f8fafc;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
}

.mode-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: transparent;
  color: #64748b;
  font-size: 13px;
  font-weight: 500;
  min-width: 0;
  flex: 1;
  justify-content: center;
}

.mode-tab:hover {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}

.mode-tab.active {
  background: #3b82f6;
  color: white;
  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
}

.tab-icon {
  font-size: 14px;
}

.tab-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.intro-content {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.intro-icon {
  font-size: 40px;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(86, 171, 47, 0.1);
  border-radius: 16px;
}

.intro-text h3 {
  font-size: 20px;
  font-weight: 600;
  color: #2c3e50;
  margin: 0 0 8px 0;
}

.intro-text p {
  font-size: 14px;
  color: #7f8c8d;
  margin: 0;
  line-height: 1.4;
}

.example-title {
  font-size: 14px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 12px;
}

.example-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.example-tag {
  background: rgba(86, 171, 47, 0.1);
  color: #56ab2f;
  padding: 8px 12px;
  border-radius: 20px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.example-tag:hover {
  background: rgba(86, 171, 47, 0.2);
  transform: translateY(-2px);
}

.chat-container {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.empty-chat {
  text-align: center;
  padding: 40px 20px;
  color: rgba(255, 255, 255, 0.8);
}

.empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.message-item {
  display: flex;
  gap: 12px;
  max-width: 85%;
}

.message-item.user {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.message-item.ai {
  align-self: flex-start;
}

.message-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background: rgba(255, 255, 255, 0.9);
  flex-shrink: 0;
}

.message-content {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  padding: 12px 16px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.message-item.user .message-content {
  background: rgba(86, 171, 47, 0.9);
  color: white;
}

.message-text {
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 8px;
}

.message-time {
  font-size: 12px;
  color: #95a5a6;
  text-align: right;
}

.message-item.user .message-time {
  color: rgba(255, 255, 255, 0.8);
}

.typing-indicator {
  display: flex;
  gap: 4px;
  padding: 8px 0;
}

.typing-indicator span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #95a5a6;
  animation: typing 1.4s infinite ease-in-out;
}

.typing-indicator span:nth-child(1) { animation-delay: -0.32s; }
.typing-indicator span:nth-child(2) { animation-delay: -0.16s; }

@keyframes typing {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1); }
}

.input-container {
  padding: 16px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.input-wrapper {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  margin-bottom: 12px;
}

.message-input {
  flex: 1;
  background: white;
  border-radius: 20px;
}

.send-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #56ab2f 0%, #a8e6cf 100%);
}

/* 智能功能区域样式 */
.smart-features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 12px;
  color: #64748b;
}

.feature-item:hover {
  background: #eff6ff;
  border-color: #3b82f6;
  color: #3b82f6;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

.feature-item .van-icon {
  font-size: 18px;
}

/* 弹窗样式 */
.quick-popup,
.history-popup {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: white;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #e2e8f0;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

.popup-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #1e293b;
}

.header-actions {
  display: flex;
  gap: 8px;
}

.popup-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  background: #f8fafc;
}

.category-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.category-tab {
  padding: 8px 16px;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  font-size: 14px;
  color: #64748b;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.category-tab:hover {
  border-color: #3b82f6;
  background: #eff6ff;
  transform: translateY(-1px);
}

.category-tab.active {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  border-color: #3b82f6;
  color: white;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.quick-queries {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.quick-query {
  padding: 12px 16px;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
  color: #374151;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.quick-query:hover {
  background: #eff6ff;
  border-color: #3b82f6;
  color: #3b82f6;
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

/* 历史记录样式 */
.empty-history {
  text-align: center;
  padding: 40px 20px;
  color: #64748b;
}

.empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.history-item:hover {
  background: #eff6ff;
  border-color: #3b82f6;
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

.history-content {
  flex: 1;
}

.history-query {
  font-size: 14px;
  color: #374151;
  font-weight: 500;
  margin-bottom: 4px;
}

.history-time {
  font-size: 12px;
  color: #64748b;
}

/* 增强输入区域样式 */
.input-container {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
}

.message-input:focus-within {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.send-btn {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  border: none;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
  transition: all 0.3s ease;
}

.send-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
}

/* 深色模式支持 */
:global(.dark-mode) .information-query-page {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
}

:global(.dark-mode) .custom-nav-bar {
  background: rgba(30, 41, 59, 0.95);
  color: white;
}

:global(.dark-mode) .feature-intro {
  background: #334155;
  border-color: #475569;
}

:global(.dark-mode) .intro-text h3 {
  color: #f1f5f9;
}

:global(.dark-mode) .intro-text p {
  color: #cbd5e1;
}

:global(.dark-mode) .message-item.ai .message-content {
  background: #334155;
  border-color: #475569;
}

:global(.dark-mode) .message-text {
  color: #f1f5f9;
}

:global(.dark-mode) .input-container {
  background: linear-gradient(135deg, #334155 0%, #475569 100%);
}

:global(.dark-mode) .message-input {
  background: #475569;
  border-color: #64748b;
  color: #f1f5f9;
}

:global(.dark-mode) .feature-item {
  background: #475569;
  border-color: #64748b;
  color: #cbd5e1;
}

:global(.dark-mode) .feature-item:hover {
  background: #1e40af;
  border-color: #3b82f6;
  color: white;
}

:global(.dark-mode) .quick-popup,
:global(.dark-mode) .history-popup {
  background: #334155;
}

:global(.dark-mode) .popup-header {
  background: linear-gradient(135deg, #475569 0%, #64748b 100%);
}

:global(.dark-mode) .popup-header h3 {
  color: #f1f5f9;
}

:global(.dark-mode) .popup-content {
  background: #1e293b;
}

:global(.dark-mode) .category-tab {
  background: #475569;
  border-color: #64748b;
  color: #cbd5e1;
}

:global(.dark-mode) .quick-query,
:global(.dark-mode) .history-item {
  background: #475569;
  border-color: #64748b;
  color: #cbd5e1;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .smart-features {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .feature-item {
    padding: 16px 12px;
  }

  .category-tabs {
    gap: 6px;
  }

  .category-tab {
    padding: 6px 12px;
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .intro-content {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }

  .smart-features {
    grid-template-columns: repeat(2, 1fr);
  }

  .feature-item {
    font-size: 11px;
    padding: 10px 6px;
  }

  .header-actions {
    flex-direction: column;
    gap: 4px;
  }
}
</style>
